<template>
  <div class="box">
    <div class="head-search">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="searchData.val"
                     clearable
                     multiple
                     size="small"
                     style="width: 300px;"
                     placeholder="请选择">
            <el-option v-for="(item, index) in querySelect"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" @click="onSearch" size="small" type="primary" icon="el-icon-picture-outline">统计</el-button>
          <!--          <el-button class="btn" size="small" type="primary" icon="el-icon-download">下载</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="list-box">
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        height="calc(100vh - 208px)"
        class="table">
        <el-table-column
          show-overflow-tooltip
          prop="repoName"
          align="center"
          label="库房"
          min-width="120">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip label="密集架">
          <el-table-column
            show-overflow-tooltip
            prop="shelvingNum"
            align="center"
            label="数量(架)"
            min-width="100">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="usedNum"
            align="center"
            label="使用数量(架)"
            min-width="120">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="unusedNum"
            align="center"
            label="未使用数量(架)"
            min-width="120">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="usedLattice"
            align="center"
            label="使用格数(格)"
            min-width="110">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="unusedLattice"
            align="center"
            label="未使用格数(格)"
            min-width="120">
          </el-table-column>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="arcRkNum"
          align="center"
          label="档案入库量(卷/件数)"
          min-width="160">
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="detailedRkNum"
          label="详细入库"
          min-width="180">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.detailedRkNum"
                 :key="index">{{item.categoryName}}：{{item.js}}
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
import { getAllList, getMoreList, getQuery } from '../../../api/statistics/houseStatistics'

export default {
  name: 'warehouseStatistics', // 库房统计
  data () {
    return {
      searchData: {
        val: []
      },
      querySelect: [],
      tableLoading: true,
      tableData: []
    }
  },
  mounted () {
    this.getQueryData()
    this.getList()
  },
  methods: {
    getQueryData () {
      getQuery().then(res => {
        this.querySelect = res.data.data
      })
    },
    getList () {
      console.log(this.searchData.val)
      this.tableLoading = true
      const request = this.searchData.val.length > 0 ? getMoreList(this.searchData.val) : getAllList()
      request.then(res => {
        // console.log(res.data.data)
        this.tableData = res.data.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onSearch () {
      // 搜索
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-search {
    ::v-deep .el-select {
      .el-input{
        width: 100%;
      }
    }
  }
</style>
